<template>
  <div class="auth-page">
    <img :src="ChatGPTIcon" alt="" />
    <div class="auth-title">OpenAI Chat</div>
    <div class="auth-sub-title">学习AI开发、掌握AI部署、运用AI提效</div>
    <img
      src="../../assets/qrcode.jpg"
      alt=""
      style="width: 250px"
    />
    <div class="auth-tips">
      扫码关注公众号
      <a href="#" target="_blank">
        回复【403】获取访问密码
      </a>
    </div>

    <a-input
      class="auth-input"
      type="password"
      placeholder="在此处填写访问码"
      v-model="authStore.accessCode"
      :status="`${authStore.accessCodeErrorMsgs ? 'error' : ''}`"
      @change="changeInput"
    ></a-input>

    <span v-if="authStore.accessCodeErrorMsgs" class="auth-error">{{
      authStore.accessCodeErrorMsgs
    }}</span>

    <div class="auth-actions">
      <a-button type="primary" @click="login">确认登录</a-button>
      <a-button type="text">稍后再说</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import ChatGPTIcon from "@/icons/chatgpt.svg";
import { useAuthStore } from "./../../store/useAuthStore";

const authStore = useAuthStore();

const changeInput = (e: any) => {
  authStore.updateCode(e.target.value);
};

const login = async () => {
  await authStore.login();
};
</script>

<style scoped lang="scss">
.auth-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  flex-direction: column;

  .auth-logo {
    transform: scale(1.4);
  }

  .auth-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 2;
  }
  .auth-sub-title {
    font-size: 14px;
    margin-top: 5px;
  }

  .auth-tips {
    font-size: 14px;
    margin-top: 5px;
  }

  .auth-input {
    margin: 3vh 0 0 0;
    width: 300px;
  }
  .auth-error {
    color: #ff5500;
    font-size: 12px;
    margin-top: 1vh;
  }

  .auth-actions {
    margin-top: 3vh;
    display: flex;
    justify-content: center;
    flex-direction: column;

    button:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}
</style>
